<template>
	<view class="container">
		<star-nav title="靓号中心" :type="3" icon="/static/myimages/m11.png"></star-nav>

		<view class="content">

			<view class="tabs">
				<view class="tab" v-for="(item,index) in navList" :key="item.id"
					:class="navCurrent==item.id?'active':''" @click="navChange(item.id)">
					{{item.tab}}
				</view>
			</view>

		</view>
		<view class="content-wrapper">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
				<view v-if="list.length > 0" class="good-number-grid">
					<view class="good-number-card" v-for="(item, index) in list" :key="index" @click="buy(item)">
						<view class="card-header">
							<text class="product-number">{{ item.number || 'N/A' }}</text>
						</view>
						<view class="card-footer">
							<view class="price-section">
								<image src="/static/hb.png" style="width: 40rpx;" mode="widthFix"></image>
								<text class="price-value">{{ item.price || 0 }}</text>
							</view>
						</view>
					</view>
				</view>

				<view v-if=" !loading&&list.length == 0 " class="none-data">
					暂无靓号
				</view>

				<!-- <view v-if="loading" class="loading-more">
					正在加载...
				</view> -->
			</scroll-view>
		</view>
		<buypopup :show="numberShow" @close="numberShow = false" :itemNumber="itemNumber" @success="handleSuccess" />
	</view>
</template>

<script>
	import config from '@/config'
	import {
		goodNumberList,
		idNumberBuy
	} from '@/api/my.js'
	import buypopup from './components/buyPopup/index.vue'
	export default {
		components: {
			buypopup
		},
		data() {
			return {
				navCurrent: 0,
				navList: [{
					tab: '全部',
					id: 0
				}, {
					tab: '3A靓号',
					id: 1
				}, {
					tab: '4A靓号',
					id: 2
				}, {
					tab: '5A靓号',
					id: 3
				}],
				imgUrl: config.uploadUrl,
				numberShow: false,
				loading: false,
				customStyleBtn1: {
					width: '650rpx',
					height: '80rpx',
					borderRadius: '20rpx',
					background: "#FFFFFF",
					fontSize: '33rpx',
					fontWeight: 800,
					color: '#F87E14',
					border: 'none',
					lineHight: '50rpx !important',
					letterSpacing: '1px',
					isEye: false
				},
				scrollTop: 0,
				list: [],
				productList: [],
				itemNumber: {
					number: null,
					price: null,
					imgUrl: null
				},
				id: null,
				params: {
					pageNo: 1,
					pageSize: 10,
					type: null
				},
				total: 0
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			navChange(id) {
				this.loading = true
				this.navCurrent = id
				this.params.type = this.navCurrent
				this.params.pageNo = 1
				this.list = []
				this.getList()
			},

			async handleSuccess() {
				let res = await idNumberBuy({
					id: this.id
				})
				uni.showToast({
					title: '购买成功',
					icon: 'none'
				})
				this.numberShow = false
				let index = this.list.findIndex(item => item.id == this.id)
				this.list.splice(index, 1)
			},
			lower() {
				if (this.list.length < this.total) {
					this.params.pageNo++
					this.getList()
				}
			},
			// 购买
			buy(item) {
				this.numberShow = true
				this.id = item.id
				this.itemNumber = item
				this.itemNumber.imgUrl = this.imgUrl
			},
			async getList() {
				try {
					let res = await goodNumberList(this.params)
					this.list = [...this.list, ...res.data.records]
					this.total = res.data.total
				} catch (error) {
					//TODO handle the exception
				}
				this.loading = false
			}

		}
	}
</script>

<style scoped>
	/* 保持原有背景和整体结构 */
	.container {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		/* 保持原始深蓝渐变背景 */
		background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
	}

	.content-wrapper {
		flex: 1;
		padding: 20rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.scroll-Y {
		width: 100%;
		height: 100%;
	}

	/* --- 两列布局 (Grid) --- */
	.good-number-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
		padding-bottom: 20rpx;
	}

	/* --- 靓号卡片样式：保持原始紧凑感，微调细节 --- */
	.good-number-card {
		/* 保持原始背景，微调透明度 */
		background-color: rgba(30, 41, 59, 0.75);
		border-radius: 24rpx;
		padding: 30rpx 20rpx;
		height: 120rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		/* 优化阴影，更柔和 */
		box-shadow: 0 6rpx 15rpx rgba(0, 0, 0, 0.35);
		transition: transform 0.3s ease;
		border: 1rpx solid rgba(255, 255, 255, 0.05);
	}

	.good-number-card:active {
		transform: scale(0.98);
	}

	.card-header {
		margin-bottom: 25rpx;
		text-align: center;
	}

	.number-tag {
		/* 标签保持原始配色 */
		display: block;
		font-size: 24rpx;
		color: #94a3b8;
		margin-bottom: 5rpx;
		font-weight: 500;
	}

	.product-number {
		/* 号码保持原始尺寸和高亮 */
		font-size: 40rpx;
		color: #ffffff;
		font-weight: 900;
		text-shadow: 0 0 10rpx rgba(255, 255, 255, 0.5);
	}

	.card-footer {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* border-top: 1rpx dashed rgba(255, 255, 255, 0.1); */
	}

	.price-section {
		display: flex;
		align-items: center;
		gap: 10rpx;
		/* 价格数值使用霓虹青色，增加科技感 */
		color: #00ffff;
	}

	.price-value {
		/* 价格数值使用第二版样式：更大的字号和发光 */
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		font-size: 36rpx;
		font-weight: 700;
		line-height: 1;
		text-shadow: 0 0 5rpx rgba(0, 255, 255, 0.5);
	}

	.price-unit {
		font-size: 24rpx;
		font-weight: 500;
		margin-left: 5rpx;
		/* 能量二字使用柔和的深灰色 */
		color: #94a3b8;
	}

	/* 购买按钮：现代化高亮渐变样式 */
	.buy-btn {
		width: 100%;
		text-align: center;
		border-radius: 16rpx;
		/* 高亮粉紫渐变 */
		background-image: linear-gradient(90deg, #ff007f, #b620e0);
		color: #fff;
		font-size: 30rpx;
		font-weight: 600;
		padding: 18rpx 0;
		cursor: pointer;
		/* 匹配渐变色的高光阴影 */
		box-shadow: 0 4rpx 15rpx rgba(255, 0, 127, 0.4);
		transition: all 0.2s;
	}

	.buy-btn:active {
		opacity: 0.8;
		transform: scale(0.98);
	}

	/* 暂无数据样式 */
	.none-data {
		width: 100%;
		height: 400rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #94a3b8;
		font-size: 32rpx;
		font-weight: 500;
		text-align: center;
	}

	.loading-more {
		text-align: center;
		padding: 20rpx 0;
		color: #94a3b8;
		font-size: 28rpx;
	}

	.content {
		padding: 20rpx;
	}

	.tabs {
		/* background-color: #3b82f6; */
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.tab {
		border-radius: 9999px;
		white-space: nowrap;
		background-color: #374151;
		color: #d1d5db;
		padding: 10rpx 24rpx;
		font-weight: 500;
		--tw-text-opacity: 1;
	}

	.active {
		color: #fff;
		background-color: #3b82f6;
	}
</style>